<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-edit"></i> 报名管理</el-breadcrumb-item>
                <el-breadcrumb-item>参赛报名</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column label="比赛名称" prop="cname" align="center"/>
            <el-table-column label="裁判" prop="headJudgeName" align="center"/>
            <el-table-column label="比赛预估耗时" prop="timeNeed" align="center"/>
            <el-table-column label="比赛规则" prop="crule" align="center"/>
            <el-table-column align="center">
            <template #header>
                <el-input v-model="search" size="small" placeholder="请输入搜索内容">
                    <template #append>
                        <el-button @click="handleSearch()">
                            搜索
                        </el-button>
                    </template>
                </el-input>
            </template>
            <template #default="scope">
                <el-button size="small" type="primary"  @click="handleEnroll(scope.$index, scope.row)">报名</el-button>
            </template>
            </el-table-column>
            </el-table>

        <!-- 弹出报名提示信息 -->
        <el-dialog v-model="dialogEnroll" title="报名确认" center>
            <el-card shadow="hover">
                <el-form :model="compForm" :label-width="formLabelWidth">
                    <el-form-item label="比赛名称" >
                        <el-input v-model="compForm.cname" disabled/>
                    </el-form-item>
                    <el-form-item label="裁判">
                        <el-input v-model="compForm.headJudgeName" disabled/>
                    </el-form-item>
                    <el-form-item label="比赛预估耗时">
                        <el-input v-model="compForm.timeNeed" disabled/>
                    </el-form-item>
                    <el-form-item label="比赛规则">
                        <el-input v-model="compForm.crule" disabled/>
                    </el-form-item>
                </el-form>
            </el-card>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEnroll = false">取消</el-button>
                <el-button type="primary" @click="saveEnroll()">确认</el-button>
            </span>
            </template>
        </el-dialog>

        <!-- 分页 -->
        <el-card>
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize"
                background="true"
                layout="total, prev, pager, next, jumper"
                :total="parseInt(totalNum)" 
                :page-sizes="pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-card>
    </div>
  
</template>

<script>
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default{
    setup(){
        const store  = useStore();
        const router = useRouter();
        onMounted(()=>{
            getCompetitionList();
            getRestEnrollnum();
        })

        const formLabelWidth = '140px'

        
        //项目对话框
        const dialogFormVisible = ref(false);        

        let tableData = reactive([]);
        const getCompetitionList = ()=>{
            store.dispatch("CompetitionList",{
                PageNum:currentPage.value,
                PageSize: pageSize.value,
            })
            .then((res)=>{
                if(res.code===200){
                    totalNum.value = res.message.split("-")[0];
                    tableData.splice(0, tableData.length, ...res.obj);
                    // console.log("比赛列表",tableData)
                }
            })
            .catch(err=>{
                console.log("报错为",err)
            })
        }
        const search = ref('');
        const handleSearch = ()=>{
            // console.log("搜索内容",search)
            store.dispatch("SearchCompetition",search.value)
            .then((res)=>{
                if(res.code===200){
                    tableData.splice(0,tableData.length, ...res.obj);
                    console.log("比赛列表",tableData);   
                }else{
                    ElMessage({
                        type:"error",
                        message:res.message,
                        center:true,
                    })
                }
            })
            .catch(err=>{
                console.log("报错为",err)
            })
        }
        

        /*报名*/
        //报名数量
        const restEnrollNum = ref(2);
        const getRestEnrollnum = ()=>{
            store.dispatch("CompetitionPlayerParticipantNum",3)
            .then(res=>{
                // console.log("报名数量结果",res)
                if(res.code===200){
                    restEnrollNum.value = 2-res.obj;
                }
            })
        }
        const compForm = reactive({
            cname: '',
            headJudgeName:"",
            timeNeed:"",
            crule:"",
        })

        //项目报名对话框
        const dialogEnroll = ref(false);
        //处理报名
        const handleEnroll = (index, row) => {
            //先查询有没有个人信息
            store.dispatch("GetUserInfo").then(res=>{
                if(res.code===200){
                    // console.log("报名前，选手信息为")

                    getRestEnrollnum();
                    ElMessageBox({
                        title:"注意",
                        message:`每个人最多报名两项项目，当前还可报名项目数量${restEnrollNum.value}`,
                        showCancelButton:true,
                        confirmButtonText:"确认",
                        cancelButtonText:"取消",
                        center:true,
                    }).then((action)=>{
                        console.log("action is ",action)
                        if(action==="confirm"&&restEnrollNum.value>0){
                            dialogEnroll.value = true;
                            console.log("报名框显示");
                            compForm.cname = row.cname;
                            compForm.crule = row.crule;
                            compForm.headJudgeName = row.headJudgeName;
                            compForm.timeNeed = row.timeNeed;
                        }else if(action==='confirm'&&restEnrollNum.value===0){
                            ElMessage({
                                type:"warning",
                                message:"抱歉，您已报名两项比赛！",
                                center:true
                            })
                        }
                    }).catch((err)=>{
                        console.log("Enroll报名捕获异常，",err)
                    })

                }else{
                    // console.log("获取个人信息失败");
                    ElMessage({
                        type:"error",
                        message:"还没有完善个人信息，请先完善个人信息",
                        center:true,
                    })
                    router.push("/profile");
                }
            }).catch(err=>{
                console.log("选手查询个人信息异常",err);
            })

            
        }
        const saveEnroll = () => {
            console.log(store.state.player)
            store.dispatch("EnrollCompetition",{
                pid:10,
                cname:compForm.cname,
                comment:"无"
            }).then((res)=>{
                if(res==="ok"){
                    ElMessage({
                        type:"success",
                        message:"报名成功",
                        center:true
                    })
                }else{
                    ElMessage({
                        type:"error",
                        message:res,
                        center:true
                    })
                }
            }).catch((err)=>{
                console.log("出现异常",err)
            })
        }

        /* 分页 */ 
        let currentPage = ref(1);
        let pageSize = ref(5);
        let totalNum = ref(14);//总条数除以每页显示条数5
        const handleSizeChange = (val) => {
            console.log(`${val} items per page`)
        }
        const handleCurrentChange = (val) => {
            console.log(`current page: ${val}`)
            getCompetitionList();
        }
        return {
            dialogFormVisible,
            formLabelWidth,
            search,
            tableData,
            getCompetitionList,
            handleSearch,

             //报名
            compForm,
            dialogEnroll,
            handleEnroll,
            saveEnroll,
            //分页
            currentPage,
            pageSize,
            totalNum,
            handleSizeChange,
            handleCurrentChange,
        }
    }
}
</script>
